<template>
  <!-- 导航栏 -->
  <div class="detail" v-if="goodsDetail">
    <van-nav-bar
      :title="goodsDetail.proname"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="(item, index) in goodsDetail.banners[0].split(',')"
        :key="index"
      >
        <img :src="item" />
      </van-swipe-item>
    </van-swipe>
    <!-- 详细信息 -->
    <div class="info">
      <p class="titile">
        <van-tag size="large" type="danger" style="margin-right: 5px"
          >自营</van-tag
        >
        {{ goodsDetail.proname }}
      </p>
      <!-- 管道符(|) 也称为过滤器 (Filter)，可以用来对模板表达式的结果进行过滤处理。 -->
      <p class="price">￥{{ goodsDetail.originprice | formaPrice }}</p>
    </div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="tatalNum == 0 ? '' : tatalNum"
        @click="$router.replace('./cart')"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" @click="add" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetail } from '@/api/goodsDetail'
import { mapMutations, mapGetters } from 'vuex'
export default {
  data () {
    return {
      goodsDetail: null
    }
  },
  created () {
    this.getDetailData()
  },
  computed: {
    ...mapGetters('cart', ['getCartList', 'tatalNum'])
  },
  methods: {
    ...mapMutations('cart', ['addCart']),
    async getDetailData () {
      const res = await getDetail(this.$route.query.proid)

      this.goodsDetail = res.data
    },
    onClickLeft () {
      this.$router.back()
    },
    add () {
      const goods = {
        proid: this.goodsDetail.proid,
        proname: this.goodsDetail.proname,
        img: this.goodsDetail.img1,
        price: this.goodsDetail.originprice,
        number: 1,
        state: true
      }
      this.addCart(goods)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-swipe {
  img {
    width: 100%;
    height: 385px;
  }
}
.info {
  padding: 10px;
  .titile {
    line-height: 30px;
  }
  .price {
    font-size: 20px;
    color: red;
    font-weight: bold;
  }
}
</style>
